var flag = true;            // 是否第一次松开鼠标
var cli_flag = true;        // 点击是否有效操作状态
var bg_flag = true;         // 背景动画是否开启
var url;                    // 标志背景图片的路径
var index = 0;              // 计算点击的次数
var imgIndex = 1;           // 标志背景图片的图片序号
var t1,t2 = null;           // 定时器
var score = 0;              // 分数
var gameUser = document.getElementsByClassName("gameUser")[0];
var power = document.getElementsByClassName("power")[0];

// 初始化
function init(){
    // 获取终点牌的位置
    var beginEnd = document.getElementsByClassName("beginEnd")[0];
    // 比终点牌高20px的位置为小熊初始的高度
    var zuidi_top = beginEnd.offsetTop - 20;
    $(".paoScore").stop();
    $(".paoScore").css({"left":"375px"});
    $(".paoScore").find("img").attr("src","./img/pao1.png");
    // 隐藏结束页面
    $("#gameOver").css({"display":"none"});
    $("#mask").css({"display":"none"});
    // 显示游戏指引
    $(".prompt").html("<img id='promptImg' src='./img/tips3.png'>");
    // 更换游戏起点路牌
    $("#endImg").attr("src","./img/begin_paodao_bg.png");
    // 小熊初始位置和动画
    $(".gameUser").css({"left":"20px","top":"-100px"});
    $(".gameUser").animate({
        "top": zuidi_top + "px"
    },1000,function(){
        flag = true;
        cli_flag = true;
        bg_flag = true;
        index = 0;
        imgIndex = 1;
        t1,t2 = null;
        score = 0;
        $(".innerSky").css({"marginLeft":"0"});
        $(".xxBg").css({"marginLeft":"0"});
        $(".xxBg1").css({"marginLeft":"0"});
    })
}

// 监听资源加载完成
queue.on('complete',function(){
    var beginEnd = document.getElementsByClassName("beginEnd")[0];
    var zuidi_top = beginEnd.offsetTop - 20;
    $(".gameUser").animate({
        "top": zuidi_top + "px"
    },1000,function(){
        $("#gameContent").on("mousedown",mouseDown);
        $("#gameContent").on("touchend",mouseUp);
        $("#gameContent").on("mouseup",mouseUp);
        $("#gameContent").on("click",oClick);
    })
},this);

// 鼠标点下触发事件
function mouseDown(){
    if(cli_flag == true && index >= 1){
        // 增加类名使小熊有抬头效果
        gameUser.classList.add("taitou");
    }
    // if(flag == true && index == 0){
    //     energy();
    // }
}


// 鼠标松开事件
function mouseUp(){
    if(cli_flag == true && index >= 1){
        // 移除抬头效果
        gameUser.classList.remove("taitou");
    }
    if(flag == true && index == 0){
        t2 = setInterval(function(){
            // 计分
            if(cli_flag == true){
                score += 500;
            }else{
                score -= 50;
            }
            // 当分数余5000为0并且背景动画在动时，更换标志背景
            if(score%5000 == 0 && bg_flag == true){
                $(".paoScore").animate({
                    "left":"-375px"
                },2800,"linear",function(){
                    imgIndex++;
                    // 背景标志最多只有12张
                    if(imgIndex > 12){
                        return;
                    }
                    // 将标志背景移动到右边
                    $(".paoScore").css({"left":"375px"});
                    // 修改标志背景图片
                    $(".paoScore").find("img").attr("src","./img/pao"+ imgIndex +".png")
                })
            }
        },300)
        
        flag = false;
        // 指引图片切换
        // $("#promptImg").attr("src","./img/tips3.png");
        $("#promptImg").remove();
        // 执行背景动画
        innerSky($(".innerSky"),$(".item"),8000);
        innerSky($(".xxBg"),$(".item1"),15000);
        innerSky($(".xxBg1"),$(".item2"),4000);
        // 松开默认向上飞行一段距离
        clickAnimate();

        // 起点牌的动画
        $(".beginEnd").animate({
            "right": "400px"
        },1500,"linear")

        // 停止小熊当前动画，新增上升动画
        $(".gameUser").stop();
        $(".gameUser").animate({
            "top": "-=100"
        },1000)
        // 停止能量条的动画
        $(".power").stop();
        $(".power").animate({
            "width":"-=1px"
        },500,function(){
            decline();
        });
    }
}

// 点击事件
function oClick(){
    if(cli_flag == true){
        index++;
        clearInter(t1);
        // if(index == 2){
        //     $("#promptImg").remove();
        // }
        if(index >= 2){
            // 停止小熊当前的动画
            $(".gameUser").stop();
            // 执行小熊上升的动画
            clickAnimate();
            // 扣取能量条
            $(".power").animate({"width":"-=30px"},300);
        }
        // 自动增加能量
        if(power.offsetWidth <= 250 && index >= 2){
            interval();
        }
        // 能量小于0时不能点击
        if(power.offsetWidth <= 0){
            clearInter(t1);
            cli_flag = false;
        }
    }
}

// 点击上升动画
function clickAnimate(){
    $(".gameUser").stop();
    $(".gameUser").animate({
        "top": "-=100"
    },1000,function(){
        decline();
    })
}

// 能量自动回复定时器
function interval(){
    t1 = setInterval(function(){
        // 当能量大于250或者小于0时清除定时器并退出
        if(power.offsetWidth >= 250 || power.offsetWidth <= 0){
            clearInter(t1);
            return;
        }
        // 能量持续增加
        $(".power").css({"width":"+=1px"});
    }, 200);
}

// 清除定时器
function clearInter(t){
    clearInterval(t);
}

// 能量条蓄力
// function energy(){
//     $(".power").animate({
//         "width": "250px"
//     },2000,function(){
//         // 当能量到达一定值，切换指引图片
//         if(power.offsetWidth >= 200){
//             $("#promptImg").attr("src","./img/tips2.png");
//         }
//     })
// }



// 持续下降
function decline(){
    // 终点标志的高度
    var beginEnd = document.getElementsByClassName("beginEnd")[0];
    // 终点标志的高度加20px为最低高度
    var zuidi_top = beginEnd.offsetTop + 20;
    $(".gameUser").animate({
        "top": zuidi_top+"px"
    },2000,function(){
        // 当降低到最低高度时，停止当前所有背景的动画，并切换成缓慢的动画
        $(".innerSky").stop();
        slowly($(".innerSky"),70);

        $(".xxBg").stop();
        slowly($(".xxBg"),50);

        $(".xxBg1").stop();
        slowly($(".xxBg1"),250);

        $(".paoScore").stop();
        $(".paoScore").animate({
            "left":"-=50"
        },2000)

        // 不可点击状态
        cli_flag = false;
        // 禁止背景继续轮播
        bg_flag = false;
        // 移除指引图片
        $("#promptImg").remove();
        // 将起点牌切换成终点牌图片
        $("#endImg").attr("src","./img/end_paodao_bg.png");
        // 终点图片移动到右侧并进行动画
        $(".beginEnd").css({"right": "-400px"})
        $(".beginEnd").animate({
            "right": "0"
        },2000,"linear")

        // 让小熊向右缓缓移动，移动完成后游戏结束
        $(".gameUser").animate({
            "left":"230px"
        },3000,"swing",function(){
            // 清除所有定时器
            clearInterval(t1);
            clearInterval(t2);
            // 能量归0
            $(".power").css({"width":"250px"});
            // 分数写在分数框上
            $(".nowScore").text(score);
            // 如果当前分数大于历史分数，历史分数更换为当前分数
            if(score > parseInt( $(".historyScore").text().trim())){
                $(".historyScore").text(score);
                // 历史新高添加new
                $(".newScore").html("<img src='./img/new.png'>");
            }else{
                // 不添加new的标志
                $(".newScore").html("");
            }
            // 显示结束页面
            $("#gameOver").css({"display":"block"});
            $("#mask").css({"display":"block"});
        })
    })
}

// 控制背景移动
function innerSky(insClass,itClass,time){
    // 获取背景的宽度
    var $li_width = itClass[0].offsetWidth;
    // 克隆第一个背景图片放在最右边
    var $lastLi = itClass[0].cloneNode(true);
    insClass.append($lastLi);
    anSky();
    function anSky(){
        // 背景动画不断重复
        if(bg_flag == true){
            insClass.animate({
                "margin-left" : -2 * $li_width + "px"
            },time,"linear",function(){
                anSky();
                insClass.css({"margin-left" : "0px"});
            })
        }
    }
}

// 背景速度变慢
function slowly(insClass,marginL){
    insClass.animate({
        "margin-left" : "-=" + marginL
    },2000,"swing")
}

// 点击按钮跳转到抽奖页面
$("#lotteryImg").on("click",function(){
    location.href = "./lottery.html";
})